window.onload = function() {
  // 生成截图按钮时间
  var btn = document.getElementById('btn')
  btn.onclick = function () {
    drawBackground(getParams())
  }
  // 生成随机单号的事件
  var randomCode = document.getElementById('randomCode')
  randomCode.onclick = function () {
    var code1 = getRandomCode()
    var code2 = getRandomCode()
    console.log(code1, code2)
    let transactionNumber1 = document.getElementById('transactionNumber')
    let merchantCode1 = document.getElementById('merchantCode')
    transactionNumber1.value = code1
    merchantCode1.value = code2
  }
  // 随机生成28位的数字
  function getRandomCode() {
    var code = ''
    for (let i = 0; i < 28; i++) {
      if (i === 0) {
        var num = Math.floor(Math.random()*10)
        num = num === 0 ? 1 : num
        code += num
      } else {
        code += Math.floor(Math.random()*10)
      }
    }
    return code
  }
  function getParams () {
    var time = document.getElementById('time')
    var payee = document.getElementById('payee')
    var price = document.getElementById('price')
    var payTime = document.getElementById('payTime')
    var payType = document.getElementById('payType')
    var transactionNumber = document.getElementById('transactionNumber')
    var merchantCode = document.getElementById('merchantCode')
    return params = {
      time: time.value,
      payee: payee.value,
      price: price.value,
      payTime: payTime.value,
      payType: payType.value,
      transactionNumber: transactionNumber.value,
      merchantCode: merchantCode.value,
      transactionNumber: transactionNumber.value
    }
  }
   //读取本地文件
   var inputOne = document.getElementById('fileOne');
   var imgURL = ''
   inputOne.onchange = function () {
       //1.获取选中的文件列表
       var fileList = inputOne.files;
       var file = fileList[0];
       //读取文件内容
       var reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = function (e) {
           //将结果显示到canvas
           imgURL = reader.result
       }
   }

  var c = document.getElementById('canvas')
  var cxt = c.getContext('2d')
  var imgItems = document.getElementsByClassName('imgItem')
  var iconUrl = ''
  for (var i = 0;i < imgItems.length;i++) {
    const item = imgItems[i]

    item.onclick = function(){
      iconUrl = item.childNodes[1].firstElementChild.currentSrc
    }
  }
  console.log('imgItems', imgItems)
  // drawBackground()
  function initBg(){
    // 画时间的背景
    drawBg({
      x: 900,
      y: 0,
      w: 200,
      h: 100,
      color: '#F2F2F2'
    })
    // 商家名称和金额的背景
    drawBg({
      x: 0,
      y: 200,
      w: 1080,
      h: 600,
      color: '#fff'
    })
    // 商户名称和支付时间和支付时间的背景
    drawBg({
      x: 300,
      y: 970,
      w: 650,
      h: 300,
      color: '#fff'
    })
    // 交易单号和商户单号的背景
    drawBg({
      x: 300,
      y: 1250,
      w: 750,
      h: 170,
      color: '#fff'
    })
  }
  function initTxt(prames){
    // 时间
    text({
      txt: prames.time,
      x: 905,
      y: 50,
      fontSize: '34px',
      color: '#5B5B5B'
    })
    // 商家名称
    text({
      txt: prames.payee,
      x: 542,
      y: 535,
      fontSize: '50px',
      center: true
    })
    // 金额
    text({
      txt: prames.price,
      x: 542,
      y: 675,
      fontSize: '80px',
      center: true
    })
    // 商户全称
    text({
      txt: prames.payee,
      x: 325,
      y: 1030,
      fontSize: '40px',
      color: '#2F2F2F'
    })
    // 支付时间
    text({
      txt: prames.payTime,
      x: 325,
      y: 1125,
      fontSize: '40px',
      color: '#2F2F2F'
    })
    // 支付方式
    text({
      txt: prames.payType,
      x: 325,
      y: 1211,
      fontSize: '40px',
      color: '#2F2F2F'
    })
    // 交易单号
    text({
      txt: prames.transactionNumber,
      x: 325,
      y: 1305,
      fontSize: '40px',
      color: '#2F2F2F'
    })
    // 商户单号
    text({
      txt: prames.merchantCode,
      x: 325,
      y: 1397,
      fontSize: '40px',
      color: '#2F2F2F'
    })
  }
  function drawLogo(){
    let img = new Image()
    img.src = imgURL || iconUrl
    setTimeout(() => {
      cxt.arc(540, 365, 75, 0, 2*Math.PI, false)
      cxt.clip()
      // 判断图片的长宽大小
      if (img.width > img.height) {
        cxt.drawImage(img, (img.width - img.height)/2, 0, img.height, img.height, 465, 290, 150, 150)
      } else {
        cxt.drawImage(img, 0, (img.height - img.width)/2, img.width, img.width, 465, 290, 150, 150)
      }
    }, 300);
  }
  function drawBg(param){
    let x = param.x || 1
    let y = param.y || 1
    let w = param.w || 100
    let h = param.h || 100
    let fillStyle = param.color || 'black'


    cxt.beginPath()
    cxt.fillStyle = fillStyle
    cxt.fillRect(x,y,w,h)
    cxt.closePath()
  }
  function drawBackground(prames){
    let img1 = new Image()
    // img1.src = 'http://moscow_001.gitee.io/weixing/js/w.jpg'
    img1.src = 'https://uat-img.vandream.com/1/16e339a670c2.jpg'
    setTimeout(() => {
      cxt.drawImage(img1, 0, 0, img1.width, img1.height)
      initBg()
      initTxt(prames)
      drawLogo()
    }, 300);
  }
  function text (param) {
    let fontSize = param.fontSize || '20px'
    let fontFamily = param.fontFamily || 'Microsoft YaHei'
    let fillStyle = param.color || 'black'
    let txt = param.txt || '默认字体'
    let x = param.x || 1
    let y = param.y || 1
    let center = param.center|| false
    console.log(param)

    cxt.save()
    cxt.beginPath()
    cxt.font= fontSize + ' ' + fontFamily
    if (center) {
      cxt.textAlign = 'center'
    }
    cxt.fillStyle = fillStyle
    cxt.fillText(txt,x,y)
    cxt.closePath()
    cxt.restore()
  }
}